<template>
  <el-dialog
    v-model="dialogVisible"
    :width="width"
    :fullscreen="fullscreen"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :before-close="handleBeforeClose"
    @close="handleClose"
    class="base-dialog"
  >
    <!-- 自定义标题栏 -->
    <template #header="{ titleId, titleClass }">
      <div class="custom-dialog-header">
        <div class="titleClass" :id="titleId" :class="titleClass">{{ title }}</div>
        <div class="icon-content">
          <!-- 全屏切换按钮 -->
          <div
            :title="!fullscreen ? '全屏' : '还原'"
            class="icon-item-content"
            v-if="showFullscreenToggle"
            @click="toggleFullscreen"
          >
            <Icon :icon="fullscreen ? 'vi-zmdi:fullscreen-exit' : 'vi-zmdi:fullscreen'" />
          </div>
        </div>
      </div>
    </template>

    <!-- 内容区域 -->
    <div class="dialog-content">
      <slot />
    </div>

    <!-- 底部按钮区域 -->
    <template #footer>
      <div class="dialog-footer">
        <!-- 左侧自定义按钮 -->
        <div class="footer-left">
          <slot name="footer-left" />
        </div>

        <!-- 右侧按钮组 -->
        <div class="footer-right">
          <!-- 自定义按钮 -->
          <slot name="footer-custom" />

          <!-- 关闭按钮 -->
          <el-button @click="handleCancel" v-if="showCancel">
            {{ cancelText }}
          </el-button>

          <!-- 提交按钮 -->
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="submitLoading"
            v-if="showSubmit"
          >
            {{ submitText }}
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDialog, ElButton, ElIcon } from 'element-plus'
import { Icon } from '@/components/Icon'

export interface BaseDialogProps {
  // 对话框标题
  title?: string
  // 对话框宽度
  width?: string
  // 是否显示
  visible?: boolean
  // 是否全屏
  fullscreen?: boolean
  // 是否显示全屏切换按钮
  showFullscreenToggle?: boolean
  // 是否显示关闭按钮
  showCancel?: boolean
  // 是否显示提交按钮
  showSubmit?: boolean
  // 关闭按钮文本
  cancelText?: string
  // 提交按钮文本
  submitText?: string
  // 提交按钮加载状态
  submitLoading?: boolean
  // 点击遮罩层是否关闭
  closeOnClickModal?: boolean
  // 按ESC键是否关闭
  closeOnPressEscape?: boolean
}

export interface BaseDialogEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'update:fullscreen', value: boolean): void
  (e: 'cancel'): void
  (e: 'submit'): void
  (e: 'close'): void
}

const props = withDefaults(defineProps<BaseDialogProps>(), {
  title: '',
  width: '600px',
  visible: false,
  fullscreen: false,
  showFullscreenToggle: true,
  showCancel: true,
  showSubmit: true,
  cancelText: '取消',
  submitText: '确定',
  submitLoading: false,
  closeOnClickModal: false,
  closeOnPressEscape: true
})

const emit = defineEmits<BaseDialogEmits>()

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: (value: boolean) => {
    emit('update:visible', value)
  }
})

// 切换全屏
const toggleFullscreen = () => {
  emit('update:fullscreen', !props.fullscreen)
}

// 关闭前处理
const handleBeforeClose = (done: () => void) => {
  emit('close')
  done()
}

// 关闭处理
const handleClose = () => {
  emit('close')
}

// 取消处理
const handleCancel = () => {
  emit('cancel')
}

// 提交处理
const handleSubmit = () => {
  emit('submit')
}
</script>

<style lang="less" scoped>
.base-dialog {
  .dialog-content {
    min-height: 200px;
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0;

    .footer-left {
      display: flex;
      gap: 8px;
    }

    .footer-right {
      display: flex;
      gap: 8px;
    }
  }

  .custom-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .titleClass {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .icon-content {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -12px;
    margin-right: -12px;
  }

  .icon-item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #909399;
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
      background-color: #f5f7fa;
      color: #409eff;
    }

    .el-icon {
      font-size: 16px;
    }
  }
}
</style>
